<template>
	<view class="imageTools">
		<!-- <uni-file-picker v-if="!imgShow" file-extname="png,jpg" fileMediatype="image" mode="grid" @select="select"
			@delete="del" :limit="1"></uni-file-picker> -->
		<view class="imgbox br-1" @click="chooseImage" v-if="!imgUrl" :class="theme+'-bg-bbox'">
			<view class="an" :class="theme + '-ftext-color'">
				<view class="jia">
					<image class="img" mode="aspectFill" src="../../../../static/images/icons/jiaa.png"></image>
				</view>
				<text>{{$t('PictureTool.Uploadpicturestobase64')}}</text>
			</view>
		</view>
		<view class="imgbox br-1" @click="see" v-if="imgUrl">
			<image class="img" mode="aspectFill" :src="imgUrl"></image>
			<view class="cha" @click.stop="del">
				<image src="../../../../static/images/icons/cha.png" mode=""></image>
			</view>
		</view>

		<view :class="['text',`${theme}-border-top`,`${theme}-border-bottom`]">
			<scroll-view scroll-y="true" style="height: 100%">
				<textarea :maxlength=" -1 " :placeholder="$t('PictureTool.Pleaseenterthebase64tobeconverted')"
					v-model="base64" />
			</scroll-view>

		</view>

		<view class="btn-box">
			<view class="btn" :class="theme+'-bg-abox'" @click="copy">
				<text>{{$t('PictureTool.Copybase64')}}</text>
			</view>

			<view class="btn" :class="theme+'-bg-abox'" @click="turn">
				<text>{{$t('PictureTool.Base64toimage')}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from '@/components/mmmm-image-tools/index.js'
	export default {
		name: "imageTools",
		data() {
			return {
				imgUrl: "",
				base64: "",
			}
		},
		methods: {
			chooseImage() {
				uni.chooseImage({
					count: 1, //默认9
					success: (res) => {
						console.log(JSON.stringify(res.tempFilePaths));
						this.imgUrl = res.tempFilePaths[0]
						uni.showLoading({
							mask: true,
							title: '转换中...'
						})
						pathToBase64(this.imgUrl)
							.then(base64 => {

								this.base64 = base64
								uni.hideLoading()
								uni.showToast({
									title: '成功转换为base64',
									icon: 'none'
								})
							})
							.catch(error => {
								uni.showToast({
									title: '请上传正确的图片',
									icon: 'none'
								})
							})
					}
				});
			},
			del(e) {
				this.imgUrl = ""
				this.base64 = ""
			},
			see() {
				uni.previewImage({
					urls: [this.imgUrl]
				})
			},
			turn() {
				base64ToPath(this.base64)
					.then(path => {
						this.imgUrl = path
						uni.showToast({
							title: '成功转换为图片,点击图片预览,然后长按可以保存哦',
							icon: 'none',
							duration: 3000
						})
					})
					.catch(error => {
						uni.showToast({
							title: '请输入正确的base64',
							icon: 'none'
						})
					})
			},
			copy() {
				uni.setClipboardData({
					data: this.base64,
					success: (res) => {
						console.log('res');
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.imageTools {
		// padding: 150rpx 40rpx 0;

		.imgbox {
			margin-top: 40rpx;
			// border: 2rpx solid #c6cede;
			height: 375rpx;
			// overflow: hidden;
			position: relative;
			cursor: pointer;

			.an {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.jia {
					width: 100rpx;
					height: 100rpx;
					margin-bottom: 20rpx;
				}

				text {
					font-size: 28rpx;
					cursor: pointer;
				}
			}

			.cha {
				height: 50rpx;
				width: 50rpx;
				position: absolute;
				right: 10rpx;
				top: 10rpx;
				cursor: pointer;
			}

		}

		.text {
			font-size: 24rpx;
			color: #838B8B;
			margin-top: 40rpx;
			line-height: 40rpx;
			height: 500rpx;
		}

		textarea {
			box-sizing: border-box;
			padding: 25rpx;
			// overflow: hidden;
			// overflow: hidden;
			// overflow-y: hidden;
			width: 100%;
			height: 100%;
			// border: 2rpx solid #c6cede;
			border-left: 0;
			border-right: 0;
			font-size: 24rpx;
		}

		.btn-box {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items: center;
			padding: 0 40rpx;

			.btn {
				width: 45%;
				height: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
				color: #FFFFFF;
				margin-top: 40rpx;
				font-size: 26rpx;
				cursor: pointer;

				text {
					cursor: pointer;
				}
			}
		}
	}
</style>
